<template>
  <view class="component-box">
    <h2 class="h2">房间成员</h2>
    <el-row class="box">
      <el-col
        class="item"
        v-for="item in modelValue"
        :key="item"
        :xs="12"
        :sm="6"
        :md="4"
        :lg="3"
        :xl="2"
      >
        <div class="item-box">
          <img class="image" src="/static/images/avatar.jpeg" />
          <div class="info-box">
            <div class="user-id">{{ item.t_admin_pk }}</div>
            <el-icon>
              <VideoCamera class="icon"  title="1对1视频通话" @click="talkOne(item.t_admin_pk)"/>
              <Mute class="icon"
                v-if="item.disableAudio"
                @click="setRemoteAudio(item.t_admin_pk, true)"
              />
              <Microphone class="icon"
                v-else
                @click="setRemoteAudio(item.t_admin_pk, false)"
              />
            </el-icon>
          </div>
        </div>
      </el-col>
    </el-row>
  </view>
</template>

<script lang="ts" setup>
import { Microphone, Mute, VideoCamera } from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

defineProps({
  modelValue: {
    type: Array,
    required: true,
  },
});

const emits = defineEmits(["setRemoteAudio"]);

const router = useRouter();
const store = useStore();

const setRemoteAudio = (t_admin_pk: number, bool: boolean) => {
  emits("setRemoteAudio", {t_admin_pk, bool});
};

const talkOne = (t_admin_pk:number) => {
  const channelName = "private_" + store.state.admin.t_admin_pk + "_" + t_admin_pk;
  router.push({name:"one",params: {channelName}});
}
</script>

<style lang="scss">
.component-box {
  .box {
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    .item {
      box-sizing: border-box;
      padding: 10px;

      .item-box {
        background-color: #acacac;
        display: flex;
        padding: 10px;
        flex-direction: column;
        align-items: center;
        border-radius: 10rpx;

        .image {
          width: 100%;
          height: auto;
        }

        .info-box {
          width: 100%;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .el-icon {
            width: inherit;
            justify-content: flex-end;

            .icon {
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>